{php}
    $include_goods_num++;
    $unique_id = 'goods_'.$include_goods_num;
{/php}
<div class="grid-item col-lg-2 col-md-3 col-sm-6 col-6 px-2" >
    <div class="grid-view_item">
        <div class="grid-view_img">
            <a class="grid-view-item__link" href="/products?id={$vo['id']}">
                <img class="grid-view-item__image primary " src="{$vo['cover_img']}" />
                <img class="grid-view-item__image hover" src="{$vo['cover_img_t']}" />
            </a>
            {if(empty($vo['type']))}
            <div class="variants add">
                <a href="javascript:;" class="btn btn-options quickShop" @click='handleGoodsShowCart({},$event,"{$unique_id}")' data-json='{:urlencode(json_encode($vo->apiNormalInfo()))}'>ADD TO BAG</a>
            </div>
            {/if}
            <div class="shopWrapper " :class="{'active':smart_goods['{$unique_id}'] && smart_goods['{$unique_id}'].active_cart}">
                <div v-if="smart_goods['{$unique_id}'] && smart_goods['{$unique_id}'].id>0">
                    <a class="btn closeShop" href="javascript:;" @click="handleGoodsHideCart(smart_goods['{$unique_id}'])"><i class="ci-close text-white"></i></a>
                    <div class="grid product-single">
                        <div class="productWrap">
                            <div class="product-form quickshopForm">
                                <div class="swatch clearfix" v-for="(sku,sku_index) in smart_goods['{$unique_id}'].sku_attr" :key="sku_index">
                                    <div class="product-form__item">
                                        <label class="header">{{sku.name}}: <span class="slVariant">{{smart_goods['{$unique_id}']['sku_group_name']?smart_goods['{$unique_id}']['sku_group_name'][sku_index]:''}}</span></label>
                                        <div class="swatch-element" v-for="(sku_content,sku_content_index) in sku.content" :key="sku_content_index" @click="handleGoodsSkuItem(smart_goods['{$unique_id}'],sku_index,sku_content.name)">
                                            <label class="swatchLbl color " :class="{'checked': smart_goods['{$unique_id}']['sku_group_name'] && smart_goods['{$unique_id}']['sku_group_name'][sku_index]==sku_content.name}" :title="sku_content.name" v-if="sku_content.img && sku_content.img.length>0" :style="'background-image:url('+sku_content.img+');'">

                                            </label>
                                            <label class="swatchLbl size " :class="{'checked': smart_goods['{$unique_id}']['sku_group_name'] && smart_goods['{$unique_id}']['sku_group_name'][sku_index]==sku_content.name}" :title="sku_content.name" v-else >
                                                {{sku_content.name}}
                                            </label>
                                        </div>

                                    </div>
                                </div>
                                <template v-if="smart_goods['{$unique_id}'].sku_price.length>0">
                                    <button class="btn quickshop-cart" v-if="smart_goods['{$unique_id}'].sold_state==1 || (smart_goods['{$unique_id}'].sku_select_obj && smart_goods['{$unique_id}'].sku_select_obj.stock-0 > 0 )" @click="handleGoodsAddCart(smart_goods['{$unique_id}'].id,smart_goods['{$unique_id}'].sku_select_obj.id)" >
                                        <span>ADD TO BAG</span>
                                    </button>
                                    <button class="btn quickshop-cart" v-else>
                                        <span> Not enough stock</span>
                                    </button>
                                </template>
                                <template v-else>
                                    <button class="btn quickshop-cart"  v-if=" smart_goods['{$unique_id}'].sold_state==1 || smart_goods['{$unique_id}'].stock-0 > 0 " @click="handleGoodsAddCart(smart_goods['{$unique_id}'].id)" >
                                        <span>ADD TO BAG</span>
                                    </button>
                                    <button class="btn quickshop-cart" v-else>
                                        <span> Not enough stock</span>
                                    </button>
                                </template>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="grid-view-item__title text-truncate" href="/products?id={$vo['id']}">{$vo['name']}</a>

        <div class="grid-view-item__meta">
            <span class="shop-price">
                <strong class="bizhong">{$money_f_name}</strong>
                <strong class="my_shop_price">{$money_f}{$vo.sold_price}</strong>
            </span>
            {if(!empty($vo.og_price) && $vo.og_price*1 > 0 ) }
            <del class="market-price">
                <strong class="bizhong">{$money_f_name}</strong>
                <strong class="my_shop_price">{$money_f}{$vo.og_price}</strong>
            </del>
            {/if}
        </div>
        <ul class="gridSwatches">
            {volist name="$vo['sku_attr_img']" id="sku_img"}
            <li class="" data-img="{$sku_img}" style="background-image: url('{$sku_img}');" ></li>
            {/volist}
        </ul>

    </div>
</div>